<template>
  <div class="realtimedata-data">
    <el-card :body-style="{ padding: '0px' }">
      <div slot="header">
        <tools-btn
          :toolsData="toolsData"
          @addData="addData"
          @refresh="refresh"
          @search="search"
          @fieldSet="fieldSet"
          @hasOperation="hasOperation"
        />
      </div>
      <table-list
        id="tableExcel"
        :table="table"
        ref="tableList"
        @handleEdit="handleEdit"
        @handleDel="handleDel"
      >
      
      <pagination
        :page="page"
        @pageSizeChange="pageSizeChange"
        @pageCurrentChange="pageCurrentChange"
      /></table-list>
    </el-card>
    <!-- 搜索弹出框 -->
    <el-dialog
      :title="searchDialog.title"
      v-if="searchDialog.visible"
      :visible.sync="searchDialog.visible"
      @close="closesearchDialog('searchDialog')"
      width="30%"
    >
      <el-form
        :model="searchDialog.data"
        ref="searchDialog.data"
        label-width="90px"
      >
        <el-form-item label="企业名称">
          <el-input
            v-model="searchDialog.person_name"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="企业地址">
          <el-input
            v-model="searchDialog.address"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="报警时间">
          <el-date-picker
            v-model="searchDialog.value2"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button
          size="small"
          plain
          @click="closesearchDialog('searchDialog')"
        >取 消</el-button>
        <el-button
            slot="reference"
            type="primary"
            size="small"
            v-text="'确 定'"
            @click="searchSubmit"
            plain
          />
        <!-- <el-popover
          class="edit-dialog-popover"
          placement="top"
          v-model="searchDialog.submitVisible"
        >
          <p style="text-align: center; margin-top: 0; color:#409eff">
            确定提交吗？
          </p>
          <div style="text-align: center">
            <el-button
              size="mini"
              @click="searchDialog.submitVisible = false"
              v-text="'取 消'"
              plain
            />
            <el-button
              type="primary"
              size="mini"
              v-text="'确 定'"
              @click="searchSubmit"
              plain
              id="btn"
            />
          </div>
        </el-popover> -->
      </span>
    </el-dialog>
  </div>
</template>
<script>
import ToolsBtn from "../../components/Tools/ToolsBtn";
import TableList from "../../components/Table/TableList";
import Pagination from "../../components/Pagination/pagination";
import TableProp from "../../utils/tableProps";
import PageProp from "../../utils/pageProps";
import tHReal from "./HReal"
export default {
  name: "RealtimeData",
  components: {
    ToolsBtn,
    TableList,
    Pagination
  },
  data () {
    return {
      table: TableProp,
      page: PageProp,
      toolsData: {
        title: "报警数据",
        oBtnShow: [
          {btn0: false}, //新增按钮
          {btn1: true}, //刷新按钮
          {btn2: true}, //搜索按钮
          {btn3: false}, //设置按钮
          {btn4: true}  //导出Excel按钮
        ]
      },
      searchDialog: {
        title: "搜 索",
        visible: false,
        submitVisible: false,
        person_name: '',
        address: '',
        value2: ''
      },
    }
  },
  created () {
    this.table.tHead = tHReal;
    this.table.identifier = true;
    this.table.hasOperation = false;
    this.getList();
  },
  methods: {
    getList(){
      this.table.data = [];
      this.table.loading = true;
      this.$api.REALTIMEDATA.policeData()
      .then(res => {
        this.table.data = res.data;
        this.table.loading = false;
      })
      .catch(() => {
        this.$message({
          message: "暂无数据",
          type: 'error'
        });
      })
    },
    // 编辑数据
    handleEdit(){

    },
    // 删除数据
    handleDel(){

    },
    // 分页大小
    pageSizeChange(size) {
      const tableDataLength = this.table.data.length;
      this.page.pageSize = size;
      if (tableDataLength < this.page.pageSize) {
        this.getList(1, size);
      } else {
        const pageNo = this.page.currentPage;
        this.getList(pageNo, size);
      }
    },
    // 翻页
    pageCurrentChange(pageNo) {
      this.page.currentPage = pageNo;
      const size = this.page.pageSize;
      this.getList(pageNo, size);
    },
    // 新增
    addData(){

    },
    // 刷新数据
    refresh(){
      this.getList();
    },
    // 搜索
    search(){
      this.searchDialog.visible = true;
      this.searchDialog.submitVisible = true;
    },
    searchSubmit(){
      function _p(s) {
        return s < 10 ? "0" + s : s;
      }
      var startTime = ''
      if(this.searchDialog.value2[0] === ''){
        startTime = this.searchDialog.value2[0]
      } else {
        const inform = new Date(this.searchDialog.value2[0]);
        startTime = `${inform.getFullYear()}-${_p(inform.getMonth() + 1)}-${_p(inform.getDate())} ${_p(inform.getHours())}:${_p(inform.getMinutes())}:${_p(inform.getSeconds())}`;
      }
      var endTime = ''
      if(this.searchDialog.value2[1] === ''){
        endTime = this.searchDialog.value2[1]
      } else {
        const inform = new Date(this.searchDialog.value2[1]);
        endTime = `${inform.getFullYear()}-${_p(inform.getMonth() + 1)}-${_p(inform.getDate())} ${_p(inform.getHours())}:${_p(inform.getMinutes())}:${_p(inform.getSeconds())}`;
      }
      const params = {
        person_name: this.searchDialog.person_name,
        address: this.searchDialog.address === '' ? null:this.searchDialog.address,
        startTime: this.searchDialog.value2 === ''? null:startTime,
        endTime: this.searchDialog.value2 === ''? null:endTime
      }
      this.$api.REALTIMEDATA.policeData(params)
      .then(res => {
        this.searchDialog.visible = false;
        this.searchDialog.submitVisible = false;
        this.table.data = res.data;
      })
      .catch(() => {
        this.$message({
          message: "暂无数据",
          type: 'error'
        });
      })
    },
    // 关闭模态
    closesearchDialog(name){
      if(name === "searchDialog"){
        this[name].submitVisible = false;
        this[name].data = null;
      }
      this[name].visible = false;
    },
    // 字段设置
    fieldSet(){

    },
    // 隐藏表格操作列
    hasOperation(){
      this.table.hasOperation = !this.table.hasOperation;
    }
  }
}
</script>
<style lang="scss" scoped>
.el-range-editor--mini.el-input__inner{
  width: 100%;
}
</style>